<template>
  <!-- showReceivingCoupon -->
    <div v-if="showReceivingCoupon">
        <div class="websocket-shade"></div>
        <div class="collect-box" v-if="showBox">
            <h3><img v-lazy="shopImg">{{message}}</h3>
            <!--滚动区域-->
            <div class="card-info-nowrap" ref="nowrapScroll">
                <div class="card-info" v-for="(data,index) in param">
                    <!--底色-->
                    <!--<div class="x-box"></div>-->
                    <!--底色end-->
                    <div class="term">
                        <p class="left"><strong>{{data.mchtName}}</strong></p>
                        <p class="right"><span>{{data.mchtArea}}</span></p>
                    </div>
                    <div class="coupon-num">
                      <div class="coupon_detail_wrp">
                        <!--电子券-->
                        <coupon-denomination :item="data" type="small"></coupon-denomination>
                        <!--电子券end-->
                        <div class="card-info-detail">
                          <strong class="card-info_title">{{data.name}}</strong>
                          <!--星级评定-->
                          <div class="">
                            <star :couponComScore="data.comScore" style="margin-left: 0.4rem;"></star>
                            <span class="grade">{{data.comNum}}条</span>
                          </div>
                          <!--星级评定end-->
                          <p class="use-info-sold">
                            <span>已售出 {{data.soldnum}}</span> <span>已使用 {{data.usednum}}</span>
                          </p>
                        </div>
                      </div>
                        <div class="img-card-hr"><img src="../../../images/cardBg_03.png"></div>
                        <div class="use-info">有效时间：{{data.validatyBegin | strDate(3)}}-{{data.validatyEnd | strDate(3)}}
                        </div>
                    </div>
                </div>
                <div class="zhanwei"></div>
            </div>
            <!--滚动区域end-->
            <!--使用须知-->
            <div class="direction-for-use">
                <div class="click-direction md_s_font">使用须知</div>
                <ul class="directopm-for-use-ul" v-if="param.length" style="
                border-bottom: 1px solid #fff;">
                    <li v-if="param[index].scpoeList&&param[index].type!=='present'&&param[index].type!=='ticket'">
                        {{param[index].scpoeList}}{{param[index].scpoe.indexOf("T") >= 0 ? "不可用" : "可用"}}
                    </li>
                    <li v-if="param[index].disableDate">{{param[index].disableDate | businessDay}}不可以使用</li>
                    <li>使用时间：{{param[index].useTime | timeAnalysis}}</li>
                    <li v-if="param[index].restricted">满{{param[index].restricted}}元可用</li>
                </ul>
                <div class="click-direction md_s_font" v-if="param[index].thirdDesc!=''&&param[index].thirdType!='url'">使用描述</div>
                <ul class="directopm-for-use-ul" v-if="param[index].thirdDesc!=''&&param[index].thirdType!='url'" style="
                border-bottom: 1px solid #fff;">
                    <li>{{param[index].thirdDesc}}</li>
                </ul>
                <!-- <hr> -->
                <ul class="directopm-for-use-ul" style="margin-left: -6%;" v-if="param.length&&param[index].type!=='present'&&param[index].type!=='ticket'">
                    <li v-if="!param[index].useRule || (param[index].useRule === 'M' || param[index].useRule === 'DM')">
                        <i class="iconfont icon-kediejiashiyong-"></i>
                        <span v-if="!param[index].useRule">不可叠加使用</span>
                        <span v-if="param[index].useRule === 'M' || param[index].useRule === 'DM'">可叠加使用{{param[index].useNum}}张</span>
                    </li>
                    <li v-if="param[index].useRule === 'D'|| param[index].useRule === 'DM'"><i
                            class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他券同使用
                    </li>
                    <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                </ul>
            </div>
            <!--使用须知end-->
            <div class="receiving-botton">
                <div class="receiving-img"></div>
                <button type="submit"  @click="rceivingCoupon">放入商券</button>
                <div class="receiving-img"></div>
                <!--关闭-->
                <svg class="icon" aria-hidden="true" @click="closeReceivingCoupon">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
                <!--关闭end-->
            </div>
        </div>
        <div class="receivingCouponGif" v-else>
            <img src="../../../images/receivingCoupon.gif"
                 alt="放入商券"><br>
            <button type="button md_s_font" @click="cardBag">查看商券</button>
            <br>
            <svg class="icon" aria-hidden="true" @click="closeReceivingCoupon">
                <use xlink:href="#icon-shanchu"></use>
            </svg>
        </div>
    </div>

</template>

<script>
    import star from '../star.vue';
    import getData4 from '../../../service/getData4.js'
    import {socket} from '../../../utils/socket'
    import { mapState} from 'vuex'

    export default {
        data: () => ({
            index: 0,//滚动查看第几个券信息
            showBox: true,//切换内容
            showReceivingCoupon: false,//true为收到卡券进行显示
            param: [],//获取到的内容
            socket: () => {
            },
            shopImg: '',
            shopName: '',
            sendUsrName:'',
            couponNum:'',
            tt:() => {}, //定时任务，断开webSocket重连
//          thirdDescArr:[]
        }),
        filters: {
            timeAnalysis: function (value) {
                if (!value) {
                    return;
                }
                if (value.indexOf('null') > 0) {
                    value = value.substring(0, value.indexOf(','));
                }
                return value
            }
        },
        components: {
            star
        },
        methods: {
            //监听滚动轴
            srollListener() {
                let slt = this.$refs.nowrapScroll.scrollLeft;
                let myWidth = document.getElementsByClassName("card-info")[0].scrollWidth;
                if (Math.ceil(slt / myWidth) <= this.param.length) {
                    this.index = Math.floor(slt / myWidth);
                }
            },
            //显示隐藏使用须知
            direction() {
                this.useIcon = !this.useIcon;
            },
            //关闭页面
            closeReceivingCoupon() {
                this.showReceivingCoupon = false;
                this.showBox = false;
            },
            //放入卡包，显示动画
            rceivingCoupon() {
                this.showBox = !this.showBox;
            },
            //跳转卡包页面
            cardBag() {
                this.$router.push({path: '/cardList'});
            },
            async messageListen (evt) {
                let param = JSON.parse(evt.data);
                console.log(param)
                let result = await getData4.getDishType({mchtId: param[0].mchtId});
                let scpoeList = result.content.lowTypeNameList;//商户菜单类型名称及id
                for (let i = 0; i < param.length; i++) {
                    let type = [];
                    param[i].scpoe.substr(1, param[i].scpoe.length + 1).split(",").find(data => {
                        scpoeList.forEach(value => {
                            if (value.typeId == data) {
                                type.push(value.typeName);
                            }
                        });
                        param[i].scpoeList = type.join("、")
                    })
                }
                    this.showReceivingCoupon = true;
                    this.showBox = true;
                    this.param = param;
                    console.log(this.param)
                    this.shopImg = param[0].mchtLogUrl;//商户头像
                    this.shopName = param[0].mchtName;//商户名
                    this.sendUsrName = param[0].sendUsrName //名称
                    this.couponNum = param[0].couponNum //张数
//                  this.thirdDescArr=param[0].thirdDesc.split('；')//描述
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo //用户信息
            }),
            //返回标题信息
            message() {
                let message = "呀！" + (this.sendUsrName || this.shopName) + "给你了" + this.couponNum + "张电子券（" + ({
                    "general": "普通券",
                    "prom": "推广券",
                    "reward": "打赏券"
                })[this.param.length > 0 ? this.param[0].promAppro : "general"] + "）";
                return message;
            }
        },
        async mounted() {
            this.$nextTick(() => {
                const me = this;
                this.socket = socket(process.env.SOCKET_API + "/web/socketServer/", this.userInfo.usrId);
                //定时查询webSocket是否断开，断开则重连。
                this.tt = setInterval(()=>{
                    //判断webSocket是否存在或不在通信状态则进行重新连接并重新建立监听事件
                    if(!me.socket || me.socket.readyState !== 1){
                        me.socket.removeEventListener("message", this.messageListen, false);//删除监听事件
                        me.socket = socket(process.env.SOCKET_API + "/web/socketServer/", me.userInfo.usrId);
                        me.socket.addEventListener("message", me.messageListen, false);//监听message事件
                    }
                },2500);
                me.socket.addEventListener("message", me.messageListen, false);//监听message事件

                me.$refs.nowrapScroll.addEventListener('scroll', me.srollListener, false);//监听滚动条位置
            });
        },
        beforeRouteLeave(to, from, next) {
            next();
        },
        beforeDestroy() {
            clearInterval(this.tt); //移除重新连接webSocket定时器
            this.socket.removeEventListener("message", this.messageListen, false);//删除监听事件
            this.socket.close(); //关闭webSocket
        }
    };
</script>

<style lang="scss" scoped>
    @keyframes radinbow {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes radinbowBotton {
        0% {
            opacity: 0;
            margin: 0 32%;
        }
        40% {
            opacity: 0;
            margin-top: -1rem;
        }
        100% {
            opacity: 1;
            margin: 2.65625rem 32% 0 32%;
        }
    }

    //遮罩
    .websocket-shade {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        z-index: 998;
        background-color: rgba(0, 0, 0, .7);
    }

    /*主体*/
    .collect-box {
        position: fixed;
        z-index: 999;
        left: 50%;
        top: 50%;
        display: flex;
        width: 80%;
        background-color: #f55581;
        align-items: center;
        flex-direction: column;
        border-radius: 0.3rem;
        text-align: center;
        transform: translate(-50%,-50%);
        h3 {
            color: #fdfdfd;
            margin: 1.0625rem 0;
            /*9-19修改*/
            width: 88%;
            text-align: left;
            font-size: 1rem;
            margin-left: 0.5rem;
            img {
                width: 3.03rem;
                height: 3.03rem;
                float: left;
                margin-right: 0.8rem;
            }
        }
        /*卡片信息*/
        div.card-info-nowrap {
            width: 90%;
            background-color: #fdfdfd;
            border-radius: 0.3rem;
            padding: 0.6rem 0;
            div.zhanwei {
                background-color: #f55581;
                padding-right: 0.1px;
            }
            div.card-info {
                height: 8.8rem;
                text-align: center;
                div.x-box {
                    position: absolute;
                    z-index: -1;
                    width: 16rem;
                    height: 8rem;
                    margin-left: -0.8rem;
                    border-radius: 0.3rem;
                    background-color: #fcaec3;
                }
                div.term {
                    height: 1rem;
                    > p {
                        font-size: 0.8rem;
                        color: #666;
                        padding: 0 0.6rem;
                        &:nth-of-type(2) {
                            font-size: 0.8rem;
                        }
                    }
                }
                .coupon-num {
                    margin-top: 0.4375rem;
                    .img-card-hr {
                        white-space: normal;
                        width: 100%;
                        img {
                          width: 100%;
                        }
                    }
                    .use-info-sold {
                      &:before {
                        display:block;
                        content: '';
                        clear: both;
                      }
                        text-align: left;
                        font-size: 0.8rem;
                        margin-top: -0.5rem;
                        span {
                            margin-left: 0.4rem;
                        }
                    }
                    .use-info {
                      font-size: 0.8rem;
                      padding: 0 0.6rem;
                      text-align: left;
                    }
                }
                .card-info-detail {
                	width: 14rem;
                  float: left;
                  margin-left: 0.5rem;
                    .card-info_title {
                        float: left;
                        font-size: 0.8rem;
                        margin-left: 0.5rem;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        width: 100%;
                        text-align: left;
                    }
                    .grade {
                        float: left;
                        font-size: .8rem;
                        line-height: 1.6rem;
                        margin-left: 0.5rem;
                    }
                    .use-info {
                        float: left;
                        margin-left: 0.3rem;
                        font-size: 0.8rem;
                    }
                }
            }
        }

        div.direction-for-use {
            width: 88%;
            color: #ffffff;
            margin-top: 5%;
            margin-left: 0.5rem;
            .click-direction {
              text-align: left;
              line-height: 1.2rem;
              margin-bottom: 0.4rem;
            }
            ul.directopm-for-use-ul {
                // margin-left: 5%;
                padding-left: 6%;
                text-align: left;
                margin-bottom: 0.8rem;
                font-size: 0.8rem;
                li {
                  margin-bottom: 0.4rem;
                }
                &:nth-of-type(1) li {
                    list-style-type: square;
                }
                &:nth-of-type(2) {
                    margin-top: 0.5rem;
                    margin-left: 0;
                    li i {
                        margin-right: 0.3rem;
                    }
                }
            }
        }
        .receiving-botton {
            // margin: 1.2rem;
            width: 80%;
            position: relative;
            height: 3rem;
            margin-bottom: 1.0625rem;
            .receiving-img {
                position: absolute;
                background-color: #3a3a3a;
                width: 1rem;
                height: 3rem;
                border-radius: 0.5rem;
                &:nth-of-type(1) {
                    left: -0.5rem;
                }
                &:nth-of-type(2) {
                    right: -0.5rem;
                    z-index: -1;
                }
            }
            button {
                position: absolute;
                left: 50%;
                top:0.3rem;
                width: 100%;
                transform: translateX(-50%);
                line-height: 2.4rem;
                border-radius: 0.3rem;
                color: #ee4d8b;
                background-color: #ffffff;
            }
            svg.icon {
                position: absolute;
                bottom: -4.5rem;
                right: 45%;
                font-size: 1.1rem;
            }
        }
    }

    .receivingCouponGif {
        position: fixed;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        align-items: center;
        /*flex-direction: column;*/
        text-align: center;
        margin-top: 3.5rem;
        z-index: 998;
        img {
            background-size: 100%;
            width: 7rem;
            margin-left: 0.5rem;
        }
        button {
          width: 9rem;
          line-height: 2.4rem;
          color: #ffffff;
          background-color: #ee4d8b;
          border-radius: 0.2rem;
          margin-top: 2.8rem;
          animation: 1s radinbowBotton;
        }
        svg.icon {
          position: absolute;
          left: 45.5%;
          right: 55.5%;
          top: 18rem;
          font-size: 2rem;
          animation: 1s radinbow;
        }
    }
    .coupon_detail_wrp {
      overflow: hidden;
      padding-top: 0.6rem;
      margin: 0 0.6rem 0.3rem 0.6rem;
      border-top: 1px solid #ccc;
    }

</style>
